<template>

  <j-editable-table
    ref="editableTable"
    :loading="loading"
    :columns="columns"
    :dataSource="dataSource"
    :rowNumber="true"
    :maxHeight="340"
    :disabledRows="{ dbFieldName:'id'}">

    <!-- update-begin-author:sunjianlei date:20210118 for:【JTC-324】校验字段插槽 -->
    <template #fieldValidType="props">
      <a-row type="flex" class="row-valid-type">
        <a-col :class="['left', {full: !isCustomRegexp(props.value)}]">
          <a-select
              :value="props.value"
              :options="validTypeOptions"
              :getPopupContainer="props.target.getParentContainer"
              style="width: 100%"
              v-bind="props.buildProps()"
              @change="(v)=>props.handleChange(v)">
            <div slot="dropdownRender" slot-scope="menu">
              <v-nodes :vnodes="menu"/>
              <ul v-show="!isCustomRegexp(props.value)" class="ant-select-dropdown-menu" style="border-top: 1px solid #dfdfdf;">
                <li class="ant-select-dropdown-menu-item" title="使用自定义正则表达式作为校验规则" @click="onAddCustomRegexp(props)">
                  正则表达式
                </li>
              </ul>
            </div>
          </a-select>
        </a-col>
        <a-col v-show="isCustomRegexp(props.value)" class="right" title="修改自定义正则表达式">
          <a-button icon="edit" @click="()=>onChangeCustomRegexp(props)"/>
        </a-col>
      </a-row>
    </template>
    <!-- update-end-author:sunjianlei date:20210118 for:【JTC-324】校验字段插槽 -->

  </j-editable-table>

</template>

<script>

  import { FormTypes } from '@/utils/JEditableTableUtil'

  import { syncAllTable } from '../util/TableUtils'

  export default {
    name: 'CheckDictTable',
    components: {
      VNodes: {
        functional: true,
        render: (h, ctx) => ctx.props.vnodes,
      },
    },
    data() {
      return {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '字段名称', // 只读
            key: 'dbFieldName',
            // width: '12%',
            width: '130px',
            type: FormTypes.input,
            defaultValue: '',
            placeholder: '',
            props: { 'disabled': true }
          },
          {
            title: '字段备注', // 只读
            key: 'dbFieldTxt',
            // width: '12%',
            width: '130px',
            type: FormTypes.input,
            defaultValue: '',
            placeholder: '',
            props: { 'disabled': true }
          },
          {
            title: '字段Href',
            key: 'fieldHref',
            // width: '12%',
            width: '130px',
            type: FormTypes.input,
            defaultValue: ''
          },
          {
            title: '验证规则',
            key: 'fieldValidType',
            // width: '16%',
            width: '170px',
            type: FormTypes.slot,
            slotName: 'fieldValidType',
            defaultValue: ''
          },
          {
            title: '校验必填',
            key: 'fieldMustInput',
            // width: '7%',
            width: '80px',
            type: FormTypes.checkbox,
            customValue: ['1', '0'],
            defaultChecked: false
          },
          {
            title: '字典Table',
            key: 'dictTable',
            // width: '12%',
            width: '130px',
            type: FormTypes.input_pop,
            defaultValue: ''
          },
          {
            title: '字典Code',
            key: 'dictField',
            // width: '12%',
            width: '130px',
            type: FormTypes.input,
            defaultValue: ''
          },
          {
            title: '字典Text',
            key: 'dictText',
            // width: '12%',
            width: '130px',
            type: FormTypes.input,
            defaultValue: ''
          }
        ],
        // 校验规则固定选项
        validTypeOptions: [
          {title: '无', value: ''},
          {title: '唯一校验', value: 'only'},
          {title: '6到16位数字', value: 'n6-16'},
          {title: '6到18位字母', value: 's6-18'},
          {title: '6到16位任意字符', value: '*6-16'},
          {title: '网址', value: 'url'},
          {title: '电子邮件', value: 'e'},
          {title: '手机号码', value: 'm'},
          {title: '邮政编码', value: 'p'},
          {title: '字母', value: 's'},
          {title: '数字', value: 'n'},
          {title: '整数', value: 'z'},
          {title: '非空', value: '*'},
          {title: '金额', value: 'money'},
        ],
      }
    },
    computed: {
      validTypeValues() {
        return this.validTypeOptions.map(opt => opt.value)
      },
    },
    methods: {

      /** 同步列表 */
      async syncTable(table1) {
        await syncAllTable(this, table1)
      },

      // update-begub-author:sunjianlei date:20210118 for:【JTC-324】校验字段插槽
      /**
       * 判断是否是自定义正则表达式
       * @param value
       */
      isCustomRegexp(value) {
        return !this.validTypeValues.includes(value)
      },

      // 添加自定义正则表达式
      onAddCustomRegexp(props) {
        this.$JPrompt({
          title: '自定义正则表达式',
          placeholder: '请输入正则表达式',
          rule: [
            {required: true, message: '正则表达式不能为空！'},
            {validator: this.validatorCustomRegexp},
          ],
          onOk: ({value}) => {
            props.handleChange(value)
          },
        })
      },

      // 更改自定义正则表达式
      onChangeCustomRegexp(props) {
        this.$JPrompt({
          title: '修改自定义正则表达式',
          defaultValue: props.value,
          placeholder: '请输入正则表达式',
          rule: [
            {required: true, message: '正则表达式不能为空！'},
            {validator: (r, v, c) => this.validatorCustomRegexp(r, v, c, props.value)},
          ],
          onOk: ({value}) => {
            props.handleChange(value)
          },
        })
      },

      // 校验自定义正则表达式
      validatorCustomRegexp(rule, value, callback, defValue) {
        if (this.isCustomRegexp(value)) {
          callback()
        } else {
          callback('当前校验已存在')
        }
      },
      // update-end-author:sunjianlei date:20210118 for:【JTC-324】校验字段插槽

    }
  }
</script>

<style scoped lang="less">

// update-begin- --- author:sunjianlei ------ date:2022-1-18 ---- for:【JTC-324】校验字段插槽----
.row-valid-type {
  .left, .right {
    &:hover {
      z-index: 3;
    }
  }

  .left {
    flex: 1;
    z-index: 2;
    width: calc(100% - 33px);

    &:not(.full) /deep/ .ant-select-selection {
      width: 100%;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

  }

  .right {
    width: 33px;
    margin-left: -1px;
    z-index: 1;

    /deep/ .ant-btn {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
}
// update-end- --- author:sunjianlei ------ date:2022-1-18 ---- for:【JTC-324】校验字段插槽----

</style>